<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script type="module">
      import { reactive } from './reactive.js'
      import { effect } from './effect.js'
      const user = reactive({
          name: '小林忽悠',
          age: 23,
          a: {
              b: {
                  c: {
                      money: 1000000
                  }
              }
          }
      })

      effect(()=>{
          document.querySelector('#app').innerText = `${user.name} - ${user.age} - ${user.a.b.c.money}`
      })
      setTimeout(()=>{
          user.name = '大林忽悠'
          setTimeout(()=>{
            user.a.b.c.money = 9999999
          },1000)
      },2000)
    </script>
</body>
</html>